<template>
  <div>
    <!-- body -->
    <div class="body-right">
        <div class="right-header">
            <div class="header-top">
                <div :class="activeClass1 == 'quan'?'active1':''" @click="getActive1('quan')"><p>全部</p></div>
                <div :class="activeClass1 == 'su'?'active1':''" @click="getActive1('su')"><p>粉丝</p></div>
                <div :class="activeClass1 == 'hun'?'active1':''" @click="getActive1('hun')"><p>拉面</p></div>
            </div>
            <div class="header-btm">
                <div :class="activeClass2 == 'zong'?'active2':''" @click="getActive2('zong')"><p>综合</p></div>
                <div :class="activeClass2 == 'xiao'?'active2':''" @click="getActive2('xiao')"><p>销量</p></div>
                <div :class="activeClass2 == 'jia'?'active2':''" @click="getActive2('jia')"><p>价格</p></div>
            </div>
        </div>
        <div class="right-contain">
            <scroll-view scroll-y="true">
                <view @click="showDetail" class="recommend_hot_box" v-for="(item, index) in noodleLists" :key="index">
                    <div>
                        <img :src="item.dish_images" class="recommend_hot_image" />
                    </div>
                    <div class="recommend-title">
                        <p>{{ item.dish_name }}</p>
                        <div class="recommend-title-child">
                            <div>
                                <label>￥</label>
                            <label class="recommend-num"> {{ item.dish_nprice / 100 }}</label>
                            </div>
                        </div>
                        <div class="recommend-add">
                            <p v-if="item.dish_gprice.length > 0">￥ {{ item.dish_gprice / 100 }}</p>
                        </div>
                    </div>
                    <div @click.stop="getDish" class="recommend-img">
                        <img src="/static/images/add.png" alt="">
                    </div>
                </view>
            </scroll-view>
            <div v-if="!more" class="contain-footer"><p>我是有底线的 T_T</p></div>
        </div>
    </div>
  </div>
</template>

<script>
import { showModel } from "../util";
export default {
  data() {
    return {
        dish_cate: 2,
        more: true,
        activeClass1: 'quan',
        activeClass2: 'zong',
        noodleLists: []
    }
  },
  methods: {
        showDetail () {
            wx.navigateTo({
            url: '/pages/detail/main'
            })
        },
        getDish () {
            console.log(111);
            
        },
        getActive1(val) {
            this.activeClass1 = val
        },
        getActive2(val) {
            this.activeClass2 = val
        },

        //读取当前菜品
        getFreshDish(init) {
           /*  wx.showLoading({
                title: '加载中', // 数据请求前loading
                icon: 'loading'
            }) */
            
            try {
                this.$httpWx.GET({
                url: 'getDishList/' + this.dish_cate,
                }).then(res => {
                    // wx.hideLoading()
                    this.noodleLists = res.data.dish
                    this.more = false
                })
            } catch (e) {
                showModel('请求失败', '请检查网络后再试!')
            }
        }
    },
    onLoad() {
        this.getFreshDish()
    },
}
</script>

<style scoped>

.body-right {
    width: 270px;
    margin-left: 110px;
}
.right-header {
    height: 80px;
    border-bottom: 1px solid rgb(241, 234, 234);
    position: fixed;
    z-index: 999;
    background: #ffffff;
    width: 270px;
}
.header-top {
    display: flex;
}
.header-top div {
    background: rgb(241, 234, 234);
    height: 30px;
    width: 70px;
    margin: 10px 15px 0 0;
    text-align: center;
    border-radius: 20px;
}
.active1 {
    border: 1px solid #ea5149;
}
.header-top div p {
    font-size: 15px;
    color: rgb(102, 97, 97);
    display: inline-block;
    line-height: 30px;
}

.header-btm {
    display: flex;
}
.header-btm div {
    height: 30px;
    width: 70px;
    margin: 10px 15px 0 0;
    text-align: center;
}
.active2 {
    color: red;
    z-index: 999;
}
.header-btm div p {
    font-size: 14px;
    display: inline-block;
    line-height: 30px;
}

.right-contain {
    padding-top: 80px;
    width: 270px;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.recommend_hot_box {
  height: 90px;
  margin: 15px 0 0 0;
  display: inline-block;
  border-bottom: 1px solid rgb(241, 234, 234);
  display: flex;
}

.recommend_hot_image {
  width: 110px;
  height: 75px;
}
.recommend_hot_box .recommend-title {
    padding-left: 10px;
}
.recommend_hot_box .recommend-title p {
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 110px;
}
.recommend-title .recommend-title-child {
    font-size: 12px;
    font-weight: 600;
    margin-top: 14px;
    color: rgb(250, 38, 23);
    display: flex;
}
.recommend-title-child .recommend-num {
    font-size: 18px;
    letter-spacing: 1px;
}
.recommend-title .recommend-add {
    font-size: 13px;
    color:rgb(110, 105, 104);
    font-weight: 500;
    text-decoration: line-through;
}
.recommend-img {
    width: 25px;
    height: 25px;
    padding-top: 50px;
}
.recommend-img img {
    width: 100%;
    height: 100%;
}

.contain-footer {
    width: 300px;
    margin: 10px auto;
}
.contain-footer p {
    width: 280px;
    font-size: 15px;
    color: rgb(172, 167, 167);
    text-align: center;
}
</style>
